<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
  }
  .layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;

  }
  .layout-nav{
    width: 420px;
    margin: 0 auto;
  }
  .layout-assistant{
    width: 300px;
    margin: 0 auto;
    height: inherit;
  }
  .layout-breadcrumb{
    padding: 10px 15px 0;
  }
  .layout-content{
    min-height: 200px;
    margin: 15px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
  }
  .layout-content-main{
    padding: 10px;
  }
  .layout-copy{
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
  }
</style>
<template><!--<Menu mode="horizontal" theme="dark" active-name="1">
      <div class="layout-logo"></div>
      <div class="layout-nav">
        &lt;!&ndash;<MenuItem name="1">
          <Icon type="ios-navigate"></Icon>
          导航一
        </MenuItem>
        <MenuItem name="2">
          <Icon type="ios-keypad"></Icon>
          导航二
        </MenuItem>
        <MenuItem name="3">
          <Icon type="ios-analytics"></Icon>
          导航三
        </MenuItem>
        <MenuItem name="4">
          <Icon type="ios-paper"></Icon>
          导航四
        </MenuItem>&ndash;&gt;
      </div>
    </Menu>-->
  <div class="layout">

    <!--<Menu mode="horizontal" active-name="1">
      &lt;!&ndash;<div class="layout-assistant">
        <MenuItem name="1">一级导航</MenuItem>
        <MenuItem name="2">二级导航</MenuItem>
        <MenuItem name="3">三级导航</MenuItem>
      </div>&ndash;&gt;
      <div style="float: left">
        logo
      </div>
      <div style="float: right">
        <div>
          <img src="../images/鲸鱼.png" alt="" width="50">{{username}}
        </div>
      </div>
    </Menu>-->
    <header-nav :username="username"></header-nav>
    <div class="layout-content">
      <Row>
        <Col span="5">
        <Menu active-name="1-2" width="auto" :open-names="['1']">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-navigate"></Icon>
              企业信息
            </template>
            <router-link to="/layout/gsInfo" class="router_link"><MenuItem name="1-1">公司信息</MenuItem></router-link>
            <router-link to="/layout/customerDetails"><MenuItem name="1-2">客户详情</MenuItem></router-link>
            <router-link to="/layout/companyServer"><MenuItem name="1-2">企业服务信息</MenuItem></router-link>
            <router-link to="/layout/steps/orderInfo"><MenuItem name="1-3">订单信息</MenuItem></router-link>
            <router-link to="/layout/taxInfo"><MenuItem name="1-4">企业税务</MenuItem></router-link>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-keypad"></Icon>
              导航二
            </template>
            <router-link to="/layout/tab"><MenuItem name="2-1">选项 1</MenuItem></router-link>
            <router-link to="/layout/gsInfo"><MenuItem name="2-2">选项 2</MenuItem></router-link>
          </Submenu>
          <Submenu name="3">
            <template slot="title">
              <Icon type="ios-analytics"></Icon>
              系统管理
            </template>
            <MenuItem name="3-1" @click="roleAdmin">角色管理</MenuItem>
            <MenuItem name="3-2" @click="roleUser">用户管理</MenuItem>
          </Submenu>
        </Menu>
        </Col>
        <Col span="19">
        <div class="layout-content-main">
          <router-view></router-view>
        </div>
        </Col>
      </Row>
    </div>
    <div class="layout-copy">
      2017-2017 &copy; JLCSData
    </div>
  </div>
</template>
<script>
  import store from "@/store"
  import {mapGetters} from 'vuex'
  //引用头部header
  import headerNav from '@/components/header/header'
  export default {
    store,
    components:{
      headerNav
    },
    data(){
      return{
        username:'admin'
      }
    },
    methods:{
      ...mapGetters({
        // 在store.js 中注册的getters
        showUserName:'showUserName'
      }),
      roleAdmin(){
        this.$router.push({
          name:'userAdministration'
        })
      },
      roleUser(){
        this.$router.push({
          name:'userAdministration'
        })
        console.log('你好');
      }
    },
    created(){
      //console.log(this.username);
      console.log('当前用户名:'+this.showUserName());
      //this.username = this.showUserName();
      //.log("当前用户名:"+this.username);
    }
  }
</script>
